<template>
	<view class="consume-list-item">
		<view class="consume-info">
			<image :src="consume.heard" mode="aspectFill"></image>
			<view>
				<view class="consume-title">{{ consume.remark }}</view>
				<view class="consume-time">{{ consume.time }}</view>
			</view>
		</view>
		<view :class="[consume.type === 1 ?  'consume-price-add':'consume-price-sub']">{{ consume.type === 1 ? '+' + consume.price:'-' + consume.price  }} 狐狸币</view>
	</view>
</template>

<script>
export default {
	props: {
		consume: Object
	}
};
</script>

<style lang="less" scoped>
.consume-list-item {
	padding: 20rpx 40rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eeeeee;
	.consume-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin-right: 15rpx;
		}
		& > view:last-child {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			.consume-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.consume-time {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
	.consume-price-add {
		font-size: 28rpx;
		color: #52c41a;
	}

	.consume-price-sub {
		font-size: 26rpx;
		color: #f86090;
	}
}
</style>
